<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="chrome-bootstrap.css"/>
        <link rel="stylesheet" type="text/css" href="options.css"/>
        <script type="text/javascript" src="global.js"></script>
        <script type="text/javascript" src="frame.js"></script>
        <script type="text/javascript" src="settings.js"></script>
    </head>
    <body class="chrome-bootstrap">
        <div class="frame subframe">
            <header>
                <h1>Settings</h1>
            </header>
            <div class="content">
                <h3>General</h3>
                <section>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="enabled">
                            <span>Enable FlashControl</span>
                        </label>
                    </div>
                    <span class="settings-row">Set FlashControl's default behavior.</span>
                    <div class="settings-row">
                        <select id="defaultmode">
                            <option>Block Flash</option>
                            <option>Allow Flash</option>
                        </select>
                    </div>
                </section>
                <h3>User interface</h3>
                <section>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="contextmenu">
                            <span>Enable the context menu</span>
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="omniicon">
                            <span>Enable the <a class="external-link" target="_blank" href="https://support.google.com/chrome/?p=settings_omnibox">omnibox</a> menu.&nbsp;</span>
                        </label>
                        <a id="menu" class="action-link">Configure menu</a>
                    </div>
                </section>
                <h3>Placeholders</h3>
                <section>
                    <div class="settings-row">
                        <button id="color">Change the color</button>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="flashborder">
                            <span>Draw a border</span>
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="showicon">
                            <span>Show an icon.&nbsp;</span>
                        </label>
                        <a id="icon" class="action-link">Set image</a>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="panelclick">
                            <span>Load content when clicked</span>
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="paneltooltip">
                            <span>Show the content URL tooltip</span>
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="toolbar">
                            <span>Show the reblock button:</span>
                        </label>
                        <select id="toolbarposition">
                            <option>Top left</option>
                            <option>Top right</option>
                            <option>Bottom left</option>
                            <option>Bottom right</option>
                        </select>
                    </div>
                </section>
                <h3>Tabs</h3>
                <section>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="foreground">
                            <span>Allow content when focused</span>
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="background">
                            <span>Block content when in background</span>
                        </label>
                    </div>
                </section>
                <h3>Power Management</h3>
                <section>
                    <div class="settings-row">
                        <span class="settings-row">Block content when this computer has not been used for a period of time.</span>
                        <input type="text" id="idlehours" class="number-input" placeholder="hours">
                        <span>:</span>
                        <input type="text" id="idleminutes" class="number-input" placeholder="minutes">
                    </div>
                    <div class="radio">
                        <label>
                            <input type="radio" id="alltabs" name="idle">
                            <span>All tabs</span>
                        </label>
                    </div>
                    <div class="radio">
                        <label>
                            <input type="radio" id="bgtabs" name="idle">
                            <span>Only background tabs</span>
                        </label>
                    </div>
                </section>
                <h3>Content</h3>
                <section>
                    <span class="settings-row">Set the rendering quality.</span>
                    <select id="flashquality">
                        <option>Default</option>
                        <option>Low</option>
                        <option>Autolow</option>
                        <option>Autohigh</option>
                        <option>Medium</option>
                        <option>High</option>
                        <option>Best</option>
                    </select>
                </section>
                <h3>User Profile</h3>
                <section>
                    <div class="settings-row">
                        <button id="sync">Sync user</button>
                        <button id="reset">Reset user</button>
                        <button id="import">Backup and Restore</button>
                    </div>
                </section>
            </div>
        </div>
        <template class="colorpicker">
            <div class="page color-picker">
                <div class="close-button"></div>
                <h1>Placeholder color</h1>
                <div class="content-area">
                    <canvas width=200 height=156 class="checkered"></canvas>
                </div>
                <div class="action-area">
                    <div class="action-area-right">
                        <div class="button-strip">
                            <button class="reset-button">Reset</button>
                            <button class="save-button">Save</button>
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <template class="omniboxmenu">
            <div class="page omnibox-menu">
                <div class="close-button"></div>
                <h1>Omnibox menu</h1>
                <div class="content-area">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" class="always-checkbox">
                            <span>Always show the icon</span>
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" class="counter-checkbox">
                            <span>Show the plugin counter</span>
                        </label>
                    </div>
                    <span class="settings-row">Set the type of interface.</span>
                    <select class="view-select">
                        <option>Simple</option>
                        <option>Moderate</option>
                        <option>Advanced</option>
                    </select>
                </div>
                <div class="action-area">
                    <div class="action-area-right">
                        <div class="button-strip">
                            <button class="cancel-button">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <template class="placeholdericon">
            <div class="page placeholder-icon">
                <div class="close-button"></div>
                <h1>Placeholder icon</h1>
                <div class="content-area">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="desaturate">
                            <span>Alternate color</span>
                        </label>
                    </div>
                    <div class="label-set">
                        <label>
                            <div>
                                <img src="graph/icon24f.png" width=24 height=24>
                            </div>
                            <input type="radio" name="panelicon">
                        </label>
                        <label>
                            <div>
                                <img src="graph/icon32f.png" width=32 height=32>
                            </div>
                            <input type="radio" name="panelicon">
                        </label>
                        <label>
                            <div>
                                <img src="graph/icon48f.png" width=48 height=48>
                            </div>
                            <input type="radio" name="panelicon">
                        </label>
                    </div>
                    <div class="label-set">
                        <label>
                            <div>
                                <img src="graph/icon24.png" width=24 height=24>
                            </div>
                            <input type="radio" name="panelicon" data-row="1">
                        </label>
                        <label>
                            <div>
                                <img src="graph/icon32.png" width=32 height=32>
                            </div>
                            <input type="radio" name="panelicon" data-row="1">
                        </label>
                        <label>
                            <div>
                                <img src="graph/icon48.png" width=48 height=48>
                            </div>
                            <input type="radio" name="panelicon" data-row="1">
                        </label>
                    </div>
                </div>
                <div class="action-area">
                    <div class="action-area-right">
                        <div class="button-strip">
                            <button class="cancel-button">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <template class="info">
            <div class="page">
                <h1></h1>
                <div class="content-area"></div>
                <div class="action-area">
                    <div class="action-area-right">
                        <div class="button-strip">
                            <button class="cancel-button">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <template class="reset">
            <div class="page">
                <div class="close-button"></div>
                <h1>Reset user profile</h1>
                <div class="content-area">
                    <p class="settings-row description">Choose the data to erase (this will restore the default install settings).</p>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" class="settings-checkbox" checked>
                            <span>Settings</span>
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" class="filters-checkbox" checked>
                            <span>Filters</span>
                        </label>
                    </div>
                </div>
                <div class="action-area">
                    <div class="action-area-right">
                        <span></span>
                        <div class="button-strip">
                            <button class="cancel-button">Cancel</button>
                            <button class="erase-button">Erase</button>
                        </div>
                    </div>
                </div>
                <div class="gray-bottom-bar">
                    <span>If you are signed into Chrome with your Google Account, any changes made during the reset will be synced.</span>
                </div>
            </div>
        </template>
        <template class="sync">
            <div class="page">
                <div class="close-button"></div>
                <h1>Sync user profile</h1>
                <div class="content-area">
                    <p class="settings-row description"><a class="external-link" target="_blank" href="https://support.google.com/chrome/?p=mktg_signin">Sign in</a> to Chrome with your Google Account to begin using Sync. If Sync is enabled, your settings will be shared with your current account.</p>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" class="sync-checkbox" checked>
                            <span>Enable Sync</span>
                        </label>
                    </div>
                    <hr>
                    <span class="settings-row description">Choose the data to sync to your account.</span>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" class="settings-checkbox" checked>
                            <span>Settings</span>
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" class="filters-checkbox" checked>
                            <span>Filters</span>
                        </label>
                    </div>
                </div>
                <div class="action-area">
                    <div class="action-area-right">
                        <div class="button-strip">
                            <button class="cancel-button">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <template class="import">
            <div class="page">
                <div class="close-button"></div>
                <h1>Backup and Restore</h1>
                <div class="content-area">
                    <p class="settings-row description">Create a backup of your current profile by saving it to a file, or load from a previous profile.</p>
                    <h3>Import</h3>
                    <input type="file" class="import-input">
                    <button class="import-button">Load text file</button>
                    <h3>Export</h3>
                    <input class="export-input" type="text" placeholder="flashcontrol.txt">
                    <button class="export-button">Save text file</button>
                </div>
                <div class="action-area">
                    <div class="action-area-right">
                        <span></span>
                        <div class="button-strip">
                            <button class="cancel-button">Close</button>
                        </div>
                    </div>
                </div>
                <div class="gray-bottom-bar">
                    <span>If you choose to export your profile, it will be saved to Chrome's default download location.</span>
                </div>
            </div>
        </template>
        <template class="intro">
            <div class="page">
                <div class="close-button"></div>
                <h1>FlashControl is Installed</h1>
                <div class="content-area flex">
                    <div class="info flex">
                        <h3>Address bar menu</h3>
                        <div>Adjust your settings quickly and easily.</div>
                        <div></div>
                    </div>
                    <div class="info flex">
                        <h3>Reblock buttons</h3>
                        <div>Block content that you don't want to see anymore.</div>
                        <div></div>
                    </div>
                    <div class="info flex">
                        <h3>Web filters</h3>
                        <div>Allow or deny content automatically while browsing.</div>
                        <div></div>
                    </div>
                </div>
                <div class="gray-bottom-bar">
                    <div>Other security and privacy extensions:</div>
                    <div>
                        <a href="https://chrome.google.com/webstore/detail/zenmate/fdcgdnkidjaadafnichfpabhfomcebme" target="_blank" title="Visit the Chrome Web Store">
                            <img src="graph/zenmate.png" width=176 height=46>
                        </a>
                    </div>
                </div>
            </div>
        </template>
    </body>
</html>
